<template>
  <div class="view">
    <Panel :title="title">
      <el-form label-position="top">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item :label="$t('m.CourseName')" required>
              <el-input v-model="course.name" :placeholder="$t('m.CourseName')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('m.CourseStatus')">
              <el-switch
                v-model="course.visible"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('m.CourseDescription')" required>
              <Simditor v-model="course.description"></Simditor>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('m.CourseGoal')" required>
              <Simditor v-model="course.goal"></Simditor>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('m.CourseContent')" required>
              <Simditor v-model="course.content"></Simditor>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('m.CourseReferences')" required>
              <Simditor v-model="course.references"></Simditor>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('m.Contest_Start_Time')" required>
              <el-date-picker
                v-model="course.start_time"
                type="datetime"
                :placeholder="$t('m.Contest_Start_Time')">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('m.Contest_End_Time')" required>
              <el-date-picker
                v-model="course.end_time"
                type="datetime"
                :placeholder="$t('m.Contest_End_Time')">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <save @click.native="saveCourse"></save>
    </Panel>
  </div>
</template>

<script>
import api from '../../api.js'
// Simditor是写好的编辑栏组件，我们可以直接引入使用
import Simditor from '../../components/Simditor.vue'

export default {
  name: 'CreateCourse',
  components: { Simditor },
  data () {
    return {
      title: '添加课程',
      course: {
        name: '',
        description: '',
        goal: '',
        content: '',
        references: '',
        visible: false
      }
    }
  },
  mounted () {
    if (this.$route.name === 'edit-course') {
      this.title = '编辑课程'
      api.getCourse(this.$route.params.courseId).then(res => {
        console.log(res.data.data)
        this.course = res.data.data
      }).catch(() => {
      })
    }
  },
  methods: {
    saveCourse () {
      let funcName = this.$route.name === 'edit-course' ? 'editCourse' : 'createCourse'
      let data = Object.assign({}, this.course)
      api[funcName](data).then(res => {
        this.$router.push({name: 'course-list', query: {refresh: 'true'}})
      }).catch((e) => {
      })
    }
  }
}
</script>
